<template>
  <div>
    <el-upload
      class="upload-demo"
      drag
      :action="uploadUrl"
      :on-exceed="handleExceed"
      :before-upload="beforeUpload"
      :limit="10"
      :file-list="fileList"
      :on-remove="handleRemove"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">
        只能上传以下文件类型：PDF、ZIP、RAR、PNG、JPG、JPEG，文件大小不超过
        100MB
      </div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [],
      uploadUrl: 'http://192.168.3.29:8081/upload',
    }
  },
  methods: {
    handleExceed (files) {
      this.$message.warning(`最多只能上传 10 个文件，请先移除部分文件再上传`)
    },
    beforeUpload (file) {
      console.log(file)
      const isSizeValid = file.size / 1024 / 1024 <= 100
      const isTypeValid = this.checkFileType(file)
      if (!isSizeValid) {
        this.$message.error(`文件 "${file.name}" 大小超过限制（100MB）`)
      }
      if (!isTypeValid) {
        this.$message.error(`文件类型不支持，只能上传 PDF、ZIP、RAR、PNG、JPG、JPEG`)
      }
      return isSizeValid && isTypeValid
    },
    checkFileType (file) {
      const allowedTypes = ['application/pdf', 'application/zip', 'application/x-rar-compressed', 'image/png', 'image/jpeg', 'image/jpg']
      return allowedTypes.includes(file.type)
    },
    handleRemove (file, fileList) {
      console.log(fileList)
      this.fileList = fileList
    },
  },
};
</script>

<style>
.upload-demo {
  border: 1px dashed #409eff;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  color: #999;
}
.upload-demo em {
  color: #409eff;
  font-style: normal;
}
</style>
